<template>
  <div class="box">
    <p class="title">编辑产品</p>
    <el-form :model="info" status-icon ref="form" label-width="110px" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="info.title"></el-input>
      </el-form-item>
      <el-form-item label="文章类型" prop="type">
        <el-select v-model.number="info.type" placeholder="请选择">
          <el-option label="普通文章" :value="0"></el-option>
          <el-option label="付费文章" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model.number="info.author"></el-input>
      </el-form-item>
      <el-form-item label="文章价格" prop="price">
        <el-input v-model.number="info.price"></el-input>
      </el-form-item>
      <el-form-item label="媒体展示" prop="media" style="margin-bottom:40px">
        <el-upload ref="mediaUpload" :multiple="true" :file-list="startMediaList" action="https://api.lktehui.com/admin/upload/upload" name="image" :limit="9" list-type="picture" style="width:60%" :on-success="uploadMediaSuccess" :on-remove="uploadMediaRemove" :before-upload="beforeUpload">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip">最多上传9张图片，且单张不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="info.sort"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <el-input v-model="info.content" style="display:none"></el-input>
        <div id="editor"></div>
      </el-form-item>
      <el-form-item class="all-handle-btn-box">
        <el-button type="primary" @click="handleCertain(info)">确定</el-button>
        <router-link class="back-btn" to="/product/list"><el-button @click="$router.back()">返回</el-button></router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startMediaList: [],
      mediaList: [],
      info: {},
      rules: {
        title: {required: true, message: '标题不能为空', trigger: 'change'},
        type: {required: true, message: '文章类型不能为空', trigger: 'change'},
        author: {required: true, message: '作者不能为空', trigger: 'change'},
        price: {required: true, message: '价格不能为空', trigger: 'change'},
        media: {required: true, message: '媒体展示不能为空', trigger: 'change'},
        sort: {required: true, message: '顺序还没有选择', trigger: 'change'},
        content: {required: true, message: '文章内容不能为空', trigger: 'change'},
      }
    }
  },
  methods: {
    handleCertain(info) {
      let _this = this;
      this.getDetailMedia();
      this.$refs.form.validate(bool => {
        if (bool) {
          this.$confirm("确定保存结果么?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //修改操作
            this.$ajax({
              url: "article/editorArticle",
              data: {
                app: info
              },
              success(res) {
                if (res.data.code === 1) {
                  _this.$message({
                    type: "success",
                    message: res.data.msg
                  });
                  _this.$router.back();
                } else {
                  _this.$message({
                    type: "warning",
                    message: res.data.msg
                  });
                }
              }
            });
          }).catch(() => {});
        }
      });
    },
    beforeUpload(file) {
      if (file.size / 1024 > 500) {
        this.$message({
          type: "warning",
          message: "“" + file.name + "”图片超过500kb"
        });
        return false;
      } else if (!/^image/.test(file.type)) {
        this.$message({
          type: "warning",
          message: "“" + file.name + "”不是图片"
        });
        return false;
      }
    },
    uploadMediaSuccess(response, file, fileList) {
      if (response.code === 1) {
        this.mediaList = fileList;
      } else {
        this.$message({
          type: "warning",
          message: response.msg
        });
      }
    },
    uploadMediaRemove(file, fileList) {
      this.mediaList = fileList;
    },
    getDetailMedia() {
      this.info.media = [];
      for (let i = 0; i < this.mediaList.length; i++) {
        this.info.media.push({ type: "images", src: this.mediaList[i].response ? this.mediaList[i].response.content : this.mediaList[i].url });
      }
    }
  },
  created() {
    const articleID = this.$route.query.articleID;
    this.info.articleID = articleID;
    let _this = this;
    let E = require('wangeditor');
    //加载富文本编辑器
    this.$nextTick(() => {
      var editor = new E("#editor");
      editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'image',  // 插入图片
        'table',  // 表格
        'undo',  // 撤销
        'redo'  // 重复
      ];
      editor.customConfig.uploadImgServer = "https://api.lktehui.com/admin/upload/upload";
      editor.customConfig.zIndex = 2;
      editor.customConfig.uploadFileName = 'image';
      editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          insertImg(result.content);
        }
      };
      editor.customConfig.onchange = function (html) {
        if (html === "<p><br></p>") {
          html = "";
        }
        _this.$set(_this.$data.info, "content", html);
      };
      editor.customConfig.customAlert = function () {}
      editor.create();
      this.editor = editor;
    });

    this.$ajax({
      url: "article/getArticleDetail",
      data: {
        app: {
          articleID
        }
      },
      success(res) {
        console.log(res);
        if (res.data.code === 1) {
          _this.info = res.data.content;
          for (let i = 0; i < res.data.content.media.length; i++) {
            _this.startMediaList.push({ name: "", url: res.data.content.media[i].src });
            _this.mediaList.push({ response: { content: res.data.content.media[i].src } });
          }
          _this.editor.txt.html(res.data.content.content);
        } else {
          _this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      }
    });
  }
};
</script>

<style scoped>
.el-form {
  width: 50%;
  margin: 0 auto;
}
.title {
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}
.back-btn {
  margin-left: 10px;
}
#editor >>> .w-e-menu {
  padding: 0 8px;
}
</style>
